<template>
	<div>
		<div class="bottomStyle" v-if="flag">
			<div v-for="(img,index) in imgUrl" :key="index" @click="changeImg(img.routerLink)">
				<router-link :to="img.routerLink">
					<img :src="current==img.routerLink?img.selectedImg:img.normalImg" alt="" />
					<p :class="{fontStyle:current==img.routerLink}">{{img.msy}}</p>
			   </router-link>
			</div>
	    </div>
	    <div v-else></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				flag:true,
				imgUrl:[
					{
						normalImg:require("../../assets/images/movieClips/1/main_trailer_normal.png"),
						selectedImg:require("../../assets/images/movieClips/1/main_trailer_selected.png"),
						msy:"片花",
						routerLink:"/movieClipIndex/movieClips"
					},
					{
						normalImg:require("../../assets/images/movieClips/1/main_circle_normal.png"),
						selectedImg:require("../../assets/images/movieClips/1/main_circle_selected.png"),
						msy:"圈子",
						routerLink:"/circleComment"
					},
					{
						normalImg:require("../../assets/images/movieClips/1/main_dynamic_normal.png"),
						selectedImg:require("../../assets/images/movieClips/1/main_dynamic_selected.png"),
						msy:"动态",
						routerLink:"/dynamicIndex/dynamicState"
					},
					{
						normalImg:require("../../assets/images/movieClips/1/main_profile_normal.png"),
						selectedImg:require("../../assets/images/movieClips/1/main_profile_selected.png"),
						msy:"我的",
						routerLink:"/mine/mineIndex"
					}
				],
				current:"movieClips"
				
			}
		},
		methods:{
			changeImg(routerlink){
				this.current = routerlink
			}
		},
		created(event){
			this.current = this.$route.path
		}
	}
</script>

<style scoped lang="less">
   @current:100rem;
	.bottomStyle{
		width:100%;
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		height:95/@current;
		background-color:rgb(255,255,255);
		border-top:1/@current solid #a54be8;
		overflow: hidden;
		div{
			float:left;
			width:25%;
			height:95/@current;
			img{
				position:absolute;
				top:15/@current;
				width:40/@current;
				height:40/@current;
			}
			.fontStyle{
				color:#A54BE8;
			}
			p{
				font-size:20/@current;
				text-align: center;
				position:absolute;
				top:58/@current;
				font-size:20/@current;
				color:#666;
			}
		}
		div:nth-of-type(1) img,div:nth-of-type(1) p{
			left:60/@current
		}
		div:nth-of-type(2) img,div:nth-of-type(2) p{
			left:220/@current
		}
		div:nth-of-type(3) img,div:nth-of-type(3) p{
			left:380/@current
		}
		div:nth-of-type(4) img,div:nth-of-type(4) p{
			left:540/@current
		}
	}
	
</style>